<template>
   <van-tabbar v-model="active" active-color="#DF5454" route class="custom-tabbar">
    <van-tabbar-item to="/" name="index" icon="fire">首页</van-tabbar-item>
    <van-tabbar-item to="/mine" name="mine" icon="user">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue'
const active = ref('index')
</script>

<style scoped>
.custom-tabbar {
  :deep(.van-tabbar) {
    height: 100px !important;
    background-color: #FFF9F0 !important;
  }

  :deep(.van-tabbar-item) {
    font-size: 28px !important;
    height: 100px !important;
    background-color: #FFF9F0 !important;

    .van-icon {
      font-size: 48px !important;
      margin-bottom: 8px !important;
    }

    .van-tabbar-item__text {
      margin-top: 8px !important;
      font-size: 28px !important;
      line-height: 32px !important;
    }

    .van-tabbar-item__icon {
      margin-bottom: 8px !important;
      font-size: 48px !important;
      line-height: 48px !important;
    }
  }
}

:deep(.van-tabbar-item--active) {
  font-weight: bold !important;
  background-color: #FFF9F0 !important;
}

/* 确保底部安全区域正确显示 */
:deep(.van-tabbar--fixed) {
  padding-bottom: env(safe-area-inset-bottom) !important;
  background-color: #FFF9F0 !important;
}
</style>
